<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main {
        width: 800px;
        margin: 0 auto;
      }
      /* 大图的样式 */
      .big {
        width: 600px;
        margin: 0 auto;
        height: 400px;
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=3c158ecece457d6c87ce9273d261b369&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201105%2F17%2F113554rnu40q7nbgnn3lgq.jpg);
        background-size: 100%;

        position: relative;
      }
      /* 左右箭头的样式 */
      .big > div {
        width: 100px;
        height: 400px;
        position: absolute;
        background-position: center;
      }
      .big > div:hover {
        background-color: lightblue;
      }
      .big > div > div {
        width: 60px;
        height: 86px;
        /* background-color: red; */
        background-image: url(./test.png);
        background-size: 260px 260px;
        margin: 147px 20px;
      }
      .big > #left {
        left: -100px;
      }
      #left > div {
        background-position-y: -100px;
      }
      /* 当鼠标悬浮在 #left 的时候，内部的div样式发生改变。 */
      #left:hover div {
        /* 背景图片切换 */
        background-position-x: -70px;
      }
      .big > #right {
        right: -100px;
      }
      #right:hover div {
        background-position-x: -70px;
      }

      /* 小图的样式 */
      .small {
        width: 800px;
        border: 1px solid black;
        height: 130px;
        position: relative;
        margin-top: 30px;
        overflow: hidden;
      }
      .small img {
        width: 100px;
        height: 70px;
        position: absolute;
        padding: 20px 0;
        margin-top: 10px;
        cursor: pointer;
        border: 1px solid gray;
        transition: left 0.3s;
      }
      .small .active {
        border: 3px solid blue;
        padding: 27px 0;
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="big">
        <div id="left" onclick="changeImg(-1)"><div></div></div>
        <div id="right" onclick="changeImg(1)"><div></div></div>
      </div>
      <div class="small">
        <img
          class="active"
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=3c158ecece457d6c87ce9273d261b369&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201105%2F17%2F113554rnu40q7nbgnn3lgq.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=c5977ccb28edd86717c0c98c8c0114c5&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3ac79f3df8dcd100501e1ae0708b4710b8122f75.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=c21fe14f13ff79cfbb37ef000e36ee36&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201303%2F18%2F233119quyrec7to3ws3rco.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=e5f1bda3b64da358ed3d3b29ef7321af&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=6744f75fd0561758a72e429b51b80f0c&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201304%2F11%2F130724xpp1t8cduuq8d1u4.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=b59b9c057b2ac69cebc2182fb54d8ffd&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201305%2F30%2F220025pxfkhykvkgkvuktq.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974479&di=f4f8f243f2f4c101fabd64e4d94f423a&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201310%2F19%2F235439yh04c010wm0qrk5d.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974478&di=699983491ac63f7c4746b8fbd95ec26b&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201407%2F18%2F135446xbaqj12g0bpp2zh1.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974478&di=a263c818dc23911bef1948878586fe49&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201403%2F12%2F093151oaan76rs4hq9n3z9.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974478&di=30c5cadcd6e92ba7083a8c9e49e9ab82&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F31%2F111859myvyiivetyftfz2n.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974477&di=86b770193b944db33b58c119d7caf5c5&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201308%2F23%2F220651x9b0h4kru904ozre.jpg"
          alt=""
        />
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213974476&di=a463a884f4076531fe3c265fd523e58a&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201309%2F03%2F150928ozb82vyzhzsv96ov.jpg"
          alt=""
        />
      </div>
    </div>
    <script>
      let imgs = document.querySelectorAll(".small img");
      let bigDiv = document.querySelector(".big");

      // 声明变量，记录当前点击的图片索引。点击哪个图片，就将这个图片的索引赋值给 currentImgIndex，当点击下一个图片的时候，此时 currentImgIndex 记录的就是上一个图片的索引。
      let currentImgIndex = 0;

      for (let i = 0; i < imgs.length; i++) {
        // 1. 设置每一个小图的绝对定位的位置。
        let img = imgs[i];
        img.index = i;
        img.style.left = i * (img.clientWidth + 16.4) + "px";

        // 2. 给小图绑定点击事件
        img.onclick = function () {
          // 需要将上一个图片的class="acctive"取消
          imgs[currentImgIndex].className = "";

          // 获取当前小图src属性值，将其赋值给大图的src
          bigDiv.style.backgroundImage = `url(${this.src})`;

          // 给当前图片设置 class="active";
          this.className = "active";

          currentImgIndex = this.index;

          // 点击图片，就调用更新函数。
          updateSwiper();
        };
      }

      // 3. 将小图滚动的逻辑封装成函数
      function updateSwiper() {
        // 遍历所有图片，然后再根据当前用户点击的图片索引(currentImgIndex)，进行判断，看是否需要移动所有图片的left位置。
        for (let i = 0; i < imgs.length; i++) {
          let img = imgs[i];
          if (currentImgIndex <= 3) {
            // 前面4张图片，被点击时，所有图片不需要滚动
            img.style.left = i * (img.clientWidth + 16.4) + "px";
          } else if (currentImgIndex > 3 && currentImgIndex < imgs.length - 3) {
            // 所有图片需要移动的部分
            img.style.left =
              (i + 3 - currentImgIndex) * (img.clientWidth + 16.4) + "px";
          }
        }
      }

      // 4. 箭头切换
      function changeImg(offset) {
        // 先将之前选中的图片，class="active"取消
        imgs[currentImgIndex].className = "";

        // 更新 索引
        currentImgIndex += offset;

        // 边界值的判断
        if (currentImgIndex < 0) currentImgIndex = 0;
        if (currentImgIndex >= imgs.length) currentImgIndex = imgs.length - 1;

        // 当前图片高亮状态
        imgs[currentImgIndex].className = "active";

        // 设置大图图片
        bigDiv.style.backgroundImage = `url(${imgs[currentImgIndex].src})`;

        // 更新小图的轮播
        updateSwiper();
      }
    </script>
  </body>
</html>